<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>博以至客会员</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <link rel="stylesheet" href="../component/layui/css/layui.css">
        <script src="../component/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../component/js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="layui-layout-body">
    <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <div>
        <div>
            <br>
            <br>
            <form class="layui-form" >
                <div class="layui-form-item" >
                    <div class="layui-input-inline">
                        <input id="bookName" type="text" name="bookName" lay-verify="pass" placeholder="按用户名搜索" autocomplete="off" class="layui-input">
                    </div>
                    <button  id="submit" type="button" data-type="reload" class="layui-btn layui-btn-primary" ><i class="layui-icon">&#xe615;</i></button>

                </div>
            </form>

            <button class="layui-btn layui-btn-primary" onclick="xadmin.open('添加用户','./admin-add.html',500,600)"><i class="layui-icon"></i>添加</button>
            <table class="layui-hide" id="test" lay-data="{id: 'test'}"  lay-filter="test"></table>
        </div>
    </div>
<script type="text/html" id="updateRole">
    <input type="checkbox" name="user_role" mid={{d.user_id}} lay-skin="switch" lay-filter="role" lay-text="admin|user" {{d.user_role=="admin"?"checked":"user"}}>
</script>
    <script type="text/html" id="barDemo" th:inline="javascript">
        <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
        <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
    </script>
    <script>
        layui.use(['table','form','jquery','layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            table.render({
                elem: '#test'
                ,url:"/user/selectUser"
                // ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                 }]
                ,title: '用户数据表'
                ,cols: [[
                   // {type: 'checkbox', fixed: 'left'}
                    {field:'user_id', width: 200,title:'用户名',sort: true,align: "center"}
                    ,{field:'user_password', width: 200,title:'密码',align: "center"}
                    ,{field:'user_name',width: 150, title:'姓名',align: "center"}
                    ,{field:'user_email',width: 200, title:'邮箱',align: "center"}
                    ,{field:'user_role',width: 100, title:'权限',templet:'#updateRole',sort: true,align: "center"}
                    ,{field:'user_sex', width: 100,title:'性别' ,align: "center"}
                    ,{field:'user_phone', width: 150,title:'电话',align: "center"}
                    ,{field:'user_ip', width: 200,title:'ip',align: "center"}
                    ,{field:'user_birthday', width: 200,title:'生日',align: "center"}
                    ,{fixed: 'right', title:'操作',width: 150, toolbar: '#barDemo'}
                ]]
                ,page: true
                , limits: [10, 15, 20]
                , limit: 15

                , parseData: function (res) {
                    var result;
                     console.log(res);
                    // console.log(JSON.stringify(res));
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    }
                    else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": result
                    };

                }
            });
            form.on('switch(role)', function(obj){
                var user_id = $(this).attr('mid');
                var user_role=obj.elem.checked?"admin":"user";
                var data=new Object();
                data.user_role=user_role;
                data.user_id=user_id;
                $.ajax({
                    url :"/user/updateUser",
                    type : "post",
                    data: {"user_role":data.user_role,"user_id":data.user_id},
                    success : function(data) {
                        if(data.status=="200"){
                            layer.msg("修改成功", {icon: 6});
                        }else{
                            layer.msg("修改失败", {icon: 6});
                        }
                    }
                });
            });
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                                type: "post",
                                url:"/user/deleteUser",
                                data: {"user_id":data.user_id,"token":$("#token").val()},
                                //dataType: "json",
                                success:function (msg) {
                                    obj.del();
                                    layer.close(index);
                                    layer.confirm('删除成功!')
                                },
                                error:function () {
                                    layer.confirm('删除失败!')
                                },
                            }
                        )
                    });
                } else if(obj.event === 'edit'){
                    $.get({
                            url:"/adminUpdateUser",
                            data:{"user_id":data.user_id,"user_password":data.user_password,"user_name":data.user_name,"user_email":data.user_email,"user_sex":data.user_sex,"user_phone":data.user_phone,"user_birthday":data.user_birthday},
                            success:function (msg){
                                window.location.href ="/adminUpdateUser?user_id="+data.user_id+"&user_password="+data.user_password+"&user_name="+data.user_name+"&user_email="+data.user_email+"&user_sex="+data.user_sex+"&user_phone="+data.user_phone+"&user_birthday="+data.user_birthday;
                            }
                        }
                    )
                }
            });
        });
    </script>
    </body>
</html>